﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Matjar - Minimalist UI eCommerce Mobile Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="HandheldFriendly" content="True">

	<link rel="stylesheet" href="css/materialize.min.css">
	<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/owl.carousel.css">
	<link rel="stylesheet" href="css/owl.theme.css">
	<link rel="stylesheet" href="css/owl.transitions.css">
	<link rel="stylesheet" href="css/fakeLoader.css">
	<link rel="stylesheet" href="css/magnific-popup.css">
	<link rel="stylesheet" href="css/style.css">
	
	<link rel="shortcut icon" href="img/favicon.png">

</head>
<body>

	<!-- navbar top -->
	<div class="navbar-top">
		<div class="side-nav-panel-left">
			<a href="#" data-activates="slide-out-left" class="side-nav-left"><i class="fa fa-bars"></i></a>
		</div>
		<!-- site brand	 -->
		<div class="site-brand">
			<a href="index.html"><h1>MATJAR</h1></a>
		</div>
		<!-- end site brand	 -->
		<div class="side-nav-panel-right">
			<a href="cart.html" class="side-nav-right"><i class="fa fa-shopping-basket"></i><span>2</span></a>
		</div>
	</div>
	<!-- end navbar top -->

	<!-- side nav left-->
	<div class="side-nav-panel-left">
		<ul id="slide-out-left" class="side-nav side-nav-panel collapsible">
			<li class="profil">
				<img src="img/profile.jpg" alt="">
				<h2>John Doe</h2>
				<h6>Mobile Developer</h6>
			</li>
			<li class="li-top"><a href="index.html"><i class="fa fa-home"></i>Home</a></li>
			<li><a href="product.html"><i class="fa fa-shopping-basket"></i>Product List</a></li>
			<li><a href="shop-single.html"><i class="fa fa-list-alt"></i>Product Details</a></li>
			<li><a href="cart.html"><i class="fa fa-shopping-cart"></i>Shopping Cart</a></li>
			<li><a href="checkout.html"><i class="fa fa-send"></i>Checkout</a></li>
			<li><a href="blog.html"><i class="fa fa-bold"></i>Blog</a></li>
			<li><a href="error404.html"><i class="fa fa-hourglass-half"></i>404</a></li>		
			<li><a href="testimonial.html"><i class="fa fa-support"></i>Testimonial</a></li>
			<li><a href="about-us.html"><i class="fa fa-user"></i>About Us</a></li>
			<li><a href="contact.html"><i class="fa fa-envelope-o"></i>Contact Us</a></li>
			<li><a href="login.html"><i class="fa fa-sign-in"></i>Login</a></li>
			<li><a href="register.html"><i class="fa fa-user-plus"></i>Register</a></li>
		</ul>
	</div>
	<!-- end side nav left-->
	
	<!-- product -->
	<div class="pages section product">
		<div class="pages-head">
				<h3>PRODUCT LIST</h3>
			</div>
		<div class="container">
			<div class="input-field">
				<select>
					<option value="">Popular</option>
					<option value="1">New Product</option>
					<option value="2">Best Sellers</option>
					<option value="3">Best Reviews</option>
					<option value="4">Low Price</option>
					<option value="5">High Price</option>
				</select>
			</div>
			<div class="row">
				<div class="col s6">
					<div class="content">
						<img src="img/shop1.png" alt="">
						<h5><a href="">Product 01</a></h5>
						<div class="star">
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
						</div>
						<h6 class="price">$40</h6>
					</div>
				</div>
				<div class="col s6">
					<div class="content">
						<img src="img/shop2.png" alt="">
						<h5><a href="">Product 01</a></h5>
						<div class="star">
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
						</div>
						<h6 class="price">$40</h6>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col s6">
					<div class="content">
						<img src="img/shop3.png" alt="">
						<h5><a href="">Product 01</a></h5>
						<div class="star">
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
						</div>
						<h6 class="price">$40</h6>
					</div>
				</div>
				<div class="col s6">
					<div class="content">
						<img src="img/shop4.png" alt="">
						<h5><a href="">Product 01</a></h5>
						<div class="star">
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="active"><i class="fa fa-star"></i></span>
							<span class="non-active"><i class="fa fa-star"></i></span>
						</div>
						<h6 class="price">$40</h6>
					</div>
				</div>
			</div>
			<div class="load-more">
				<a href="" class="product-button">Load More</a>
			</div>
		</div>
	</div>
	<!-- end product -->

	<!-- loader -->
	<div id="fakeLoader"></div>
	<!-- end loader -->
	
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="about-us-foot">
				<h6>MATJAR</h6>
				<p>is a lorem ipsum dolor sit amet, consectetur adipisicing elit consectetur adipisicing elit.</p>
			</div>
			<div class="social-media">
				<a href=""><i class="fa fa-facebook"></i></a>
				<a href=""><i class="fa fa-twitter"></i></a>
				<a href=""><i class="fa fa-google"></i></a>
				<a href=""><i class="fa fa-linkedin"></i></a>
				<a href=""><i class="fa fa-instagram"></i></a>
			</div>
			<div class="copyright">
				<span>© 2018 All Right By </span>
			</div>
		</div>
	</div>
	<!-- end footer -->
	
	<!-- scripts -->
	<script src="js/jquery.min.js"></script>
	<script src="js/materialize.min.js"></script>
	<script src="js/owl.carousel.min.js"></script>
	<script src="js/fakeLoader.min.js"></script>
	<script src="js/main.js"></script>

</body>
</html>